<template>
	<view class="fenlei">
		<view class="asyyds" v-for="item in navbirList" :key="item.id" @tap="gouxiangqing(item.id)">
			<view class="fenwen">
				{{item.name}}
			</view>
			<image :src="item.icon" mode=""></image>
		</view>
	</view>
</template>
<script>
	import{fenlei}from '../../api/fenlei/fenlei.js'
	export default {
		name:'Fenlei',
		data() {
			return {
				// 分类
				navbirList:[]
			};
		},
		methods:{
			gouxiangqing(id){
				uni.navigateTo({
					url:`/pages/fenleixiangqing/fenXiang/fenXiang?id=${id}`
				})
			}
		},
		onLoad(){
			fenlei("1308336521604599809").then(res=>{
				console.log(res)
				if(res.data.success){
					console.log(res.data.success)
					this.navbirList = res.data.data.category.children
				} else{
					uni.showToast({
						title:"获取分类数据失败"
					})
				}
			})
		}
	}
</script>
<style lang="less" scoped>
	.fenlei{
		padding: 28rpx;
		background-color: #f4e8ab;
		height: 100vh;
		.asyyds{
			width: 100%;
			height: 20%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 20rpx;
			margin: 0 auto 32px;
			position:relative;
			image{
				width: 201rpx;
				height: 100%;
			}
			.fenwen{
				font-size: 24rpx;
				margin-left: 20rpx;
			}
			&:nth-child(1){
				background-color:#989696;
			}
			&:nth-child(2){
				background-color:#f8f8f8;
			}
			&:nth-child(3){
				width: 49%;
				height: 30%;
				float: left;
				background-color: #ffff00;
				image{
					width: 100%;
					height: 100%;
				}
				.fenwen{
					position: absolute;
					left: 20rpx;
					z-index: 100;
					font-size: 24rpx;
					margin-left: 20rpx;
				}
			}
			&:nth-child(4){
				width: 49%;
				height: 30%;
				float: right;
				background-color:#989696;
				image{
					width: 100%;
					height: 100%;
				}
				.fenwen{
					position: absolute;
					left: 20rpx;
					z-index: 100;
					font-size: 24rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>